<template lang="pug">
    div(class="jb-zone-header")
        el-row
            el-col(:span="24")
                div(class="jb-zone-header_baseinfo")
                    div(class="jb-zone-header_baseinfo_avatar", v-if="summary.avatar")
                        el-image(:src="summary.avatar", style="border-radius: 132px; overflow:hidden;")
                    svg(class="icon jb-zone-header_baseinfo_avatar", aria-hidden="true", v-else)
                        use(xlink:href="#icon-morentouxiang")
                div(class="jb-zone-header_baseinfo")
                    span {{summary.nickname}}

        el-row(class="jb-zone-header_datainfo")
            el-col(:span="8")
                div(class="align-c", @click.stop="postVisible=true") {{summary.postCount}}
                div(class="align-c", @click.stop="postVisible=true") 帖子
            el-col(:span="8")
                div(class="align-c", @click.stop="followerVisible=true") {{summary.followingCount}}
                div(class="align-c", @click.stop="followerVisible=true") Ta的关注
            el-col(:span="8")
                div(class="align-c", @click.stop="followingVisible=true") {{summary.followerCount}}
                div(class="align-c", @click.stop="followingVisible=true") 关注Ta
        active-panel(:visible="postVisible", @history-back="postVisible=false", paged-panel-height="100vh")
            post-list(:wx-uid="summary.wxUId") 
        active-panel(:visible="followerVisible",@history-back="followerVisible=false", paged-panel-height="100vh")
            follower-list(:wx-uid="summary.wxUId")
        active-panel(:visible="followingVisible",@history-back="followingVisible=false", paged-panel-height="100vh")
            following-list(:wx-uid="summary.wxUId")
</template>

<script>
// 查看用户
import BaseVue from "@/mixins/BaseVue.js";
import util from "@/libs/util";
import axios from "@/plugins/axios";
import FollowerList from "@/pages/user/FollowerList";
import FollowingList from "@/pages/user/FollowingList";

export default {
  name: "user-zone",
  mixins: [BaseVue],
  components: {
    "follower-list": FollowerList,
    "following-list":FollowingList
  },
  data() {
    return {
      summary: {
        postCount: "-",
        followingCount: "-",
        followerCount: "-"
      },

      postVisible: false,

      followerVisible: false,

      followingVisible: false
    };
  },
  props: {
    // 外部傳入的微信用戶id
    "wx-uid": { type: String, default: null }
  },
  watch: {
    wxUid(val) {
      this.getSummary(val);
    }
  },
  methods: {
    getSummary(wxUId) {
      const options = {
        data: { wxUId: wxUId },
        url: "forum/summary/zone",
        method: "post"
      };
      axios(options)
        .then(this.getSummarySuccess)
        .catch(() => {});
    },
    getSummarySuccess(summary) {
      this.summary = summary;
    }
  },
  created() {
    if (this.wxUid) this.getSummary(this.wxUid);
  }
};
</script>

<style lang="less" scoped>
@import url("../../common/common.less");

.jb-zone-header {
  background-color: white;
  padding: 6px 10px;

  &:root {
    font-size: 1rem;
  }

  // 居中对齐
  .align-c {
    text-align: center;
  }

  &_baseinfo {
    text-align: center;

    &_avatar {
      @avatar_width: 132px;
      width: @avatar_width;
      height: @avatar_width;
      margin: auto;
    }
  }

  &_datainfo {
    border-top: 1px solid @segmentation_color;
    margin-top: 20px;
    padding: 10px 0;
    font-size: 0.8em;
  }
}
</style>
